<template>
    <div class="home">

        <!--S提示-->
        <div id="hint">
            <router-link to="record/list" class="a">
                <template v-if="!plugin.auto.open">当前{{setting.currency_name}}:{{member.balance}}</template>
                <template v-else>
                    <span class="status">
                        <i class="iconfont" :class="getFloatStatusClass()"></i>当前{{setting.currency_name}}:{{member.balance}}
                    </span>
                </template>
            </router-link>
        </div>
        <!--E提示-->

        <!--S帮助信息-->
        <div id="help" @click="showHelp" v-if="setting.show_help === '1'">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-bangzhu"></use>
            </svg>
            赚取{{setting.currency_name}}
        </div>
        <!--E帮助信息-->

        <!--S订单-->
        <div class="right-bottom">
            <router-link to="order/list" class="a">
                <svg class="icon">
                    <use xlink:href="#icon-dingdan"></use>
                </svg>
                订单
            </router-link>
        </div>
        <!--E订单-->

        <!--S签到-->
        <div v-if="!plugin.auto.open" id="sign-in" class="right-bottom" @click="signIn">
            <svg class="icon">
                <use xlink:href="#icon-qiandao"></use>
            </svg>
            签到
        </div>
        <!--E签到-->

        <!--S粉丝关注每日自动获取积分-->
        <div v-else id="sign-in" class="right-bottom" @click="signIn">
            <i class="icon iconfont icon-zhuan"></i>
            {{setting.currency_name}}
        </div>
        <!--E粉丝关注每日自动获取积分-->


        <!--S列表-->
        <div id="list" v-if="list.data.length > 0">
            <cube-scroll ref="scroll" :options="scroll_options" @pulling-up="upLoad">
                <dl v-for="item in list.data" :key="item.id">
                    <router-link :to="'/goods/'+item.id" class="a">
                        <dt><img :src="item.images_src[0]" @load="$refs.scroll.refresh()" /></dt>
                        <dd class="name">{{item.name}}</dd>
                        <dd class="price">{{item.price}}{{setting.currency_name}}</dd>
                        <dd class="inventory">库存:{{item.inventory}}</dd>
                        <dd class="sales">已兑：{{item.sales}}</dd>
                    </router-link>
                </dl>
            </cube-scroll>
        </div>
        <empty v-else class="empty">暂无兑换商品</empty>
        <!--E列表-->

        <!--S子页面-->
        <transition :name="transition_name">
            <router-view class="children" />
        </transition>
        <!--E子页面-->


    </div>
</template>

<script>
    import {mapState} from "vuex";
    import empty from "../../components/empty/Empty";
    import plugin from "../../util/plugin";
    import pluginAtuo from "../../plugins/auto/index";
    export default {
        name: "home",
        data(){
            return {
                transition_name:"",  //子页面加载动画
                //滚动参数
                scroll_options:{
                    pullUpLoad: {
                        txt: {
                            more: "上拉加载更多",
                            noMore: "----我也是有底线的----"
                        }
                    }
                },
                //商品列表
                list:{
                    data:[],
                    limit:[0,10]
                },
                // 插件
                plugin:{
                    // 粉丝关注赠送积分插件
                    auto:{
                        open: false,  //插件是否打开
                        status: 0  //积分浮动状态
                    }
                }
            }
        },
        computed:{
            ...mapState({
                member:"member",
                setting:"setting"
            })
        },
        components:{
          empty
        },
        beforeRouteUpdate(to, from, next){
            this.transition_name = to.path.split('/').length < from.path.split('/').length ? "animate__animated animate__slideOutRight animate__faster animate__delay-2s" : "animate__animated animate__slideInRight animate__faster animate__delay-2s";
            setTimeout(()=>{
                next();
            },10);
        },
        created() {
            this.getList();
            plugin.tryRun("auto")
                .then((open)=>{
                    this.plugin.auto.open = open;
                    if(open){
                        return pluginAtuo.floatStatus(this.$sysinfo.uid);
                    }
                })
                .then((res)=>{
                    if(res !== undefined){
                        this.plugin.auto.status = res;
                    }
                })
        },
        methods:{
            //Run
            /**
             * 获取商品列表
             */
            getList(){
                this.$url("goods/getListApp",{
                    limit:this.list.limit
                })
                .then((res)=>{
                    if(res.data.status === "success"){
                        this.list.limit[0] += this.list.limit[1];
                        if(this.$refs.scroll) this.$refs.scroll.forceUpdate(true,true);
                        this.list.data.push(...res.data.data);
                    }else{
                        if(this.$refs.scroll) this.$refs.scroll.forceUpdate(false,false);
                    }
                });
            },

            //Handle
            /**
             * 签到，获取签到二维码 || 插件粉丝自动获取积分关注公众号二维码
             */
            signIn(){
                let title = "长按识别二维码签到";
                if(this.plugin.auto.open) title = "扫码每日自动赚"+this.setting.currency_name;
                this.$url("signIn/getSignQrcode")
                .then((res)=>{
                    if(res.data.status === "success"){
                        this.$createDialog({
                            type: 'alert',
                            title,
                            content: `<img class="sign-in-qrcode-dialog" src="${res.data.data}" />`
                        }).show();
                    }
                });
            },
            /**
             * 显示帮助信息
             */
            showHelp(){
                this.$createDialog({
                    type: 'alert',
                    content:this.setting.help
                }).show();
            },
            /**
             * 上拉加载
             */
            upLoad(){
                this.getList();
            },
            // louie-plugin
            /**
             * 设置顶部积分浮动区域icon-class
             */
            getFloatStatusClass() {
                let str_class = "";
                if(this.plugin.auto.status === 1){
                    str_class = "icon-shangsheng";
                }else if(this.plugin.auto.status === -1){
                    str_class = "icon-xiajiang";
                }
                return str_class;
            }
        }
    }
</script>

<style scoped lang="less" src="./home.less"></style>

<style lang="stylus">
    .sign-in-qrcode-dialog
        width 200px
        height 200px
</style>
